import React, { Component } from 'react';
import PropTypes from 'prop-types';

import { Input, message } from 'antd';
import OperModal from '@/component/common/OperModal';
const LabelItem = OperModal.LabelItem;

import MModal from '@/component/common/MModal';

import ApiHelper from '@/store/ApiHelper';
import { update_member_psw as api_update_member_psw } from '@/constants/ApiTypes';

class ModifyPswModal extends Component {
    constructor(props) {
        super(props);
    }
    static propTypes = {
        visible: PropTypes.bool,
        onClose: PropTypes.func.isRequired,
        account_name: PropTypes.string.isRequired,
        account_id: PropTypes.number.isRequired
    };
    defaultState = {
        psw1: '',
        psw2: ''

    };
    state = this.defaultState;
    componentWillReceiveProps(nextProps) {
        if (nextProps.visible) {
            this.setState(this.defaultState);
        }
    }
    submit = async () => {
        const { psw1, psw2 } = this.state;
        if (psw1 == '') {
            this.input_psw1.focus();
            return message.warn('请输入新密码！', 1.5);
        }
        if (psw2 == '') {
            this.input_psw2.focus();
            return message.warn('请输入重复密码！', 1.5);
        }
        if (psw1.length < 6) {
            this.input_psw1.refs.input.select();
            return message.warn('新密码长度必须大于6位！', 1.5);
        }
        if (psw2.length < 6) {
            this.input_psw2.refs.input.select();
            return message.warn('重复密码长度必须大于6位！', 1.5);
        }
        if (psw1 !== psw2) {
            return message.warn('2次输入密码不一致！', 1.5);
        }
        const data = {
            account_id: this.props.account_id,
            psw: psw1,
            psw2: psw2
        };
        const result = await ApiHelper.requestPost(api_update_member_psw, data);
        if (result.status) {
            MModal.success({ title: '操作成功', content: '操作成功', duration: 1.5 });
            this.props.onClose();
        } else {
            MModal.success({ title: '操作失败', content: result.info });
        }
    };
    inputOnChange = e => {
        this.setState({
            [e.target.name]: e.target.value
        });
    };
    render() {
        const { visible, onClose, account_name } = this.props;
        const { psw1, psw2 } = this.state;
        const inputStyle = { width: 150 };
        return (
            <OperModal visible={visible} onClose={onClose} title="重置密码" width={320} height={220} onOk={this.submit}>
                <LabelItem label="账号" align="right" width={75}>
                    <Input style={inputStyle} disabled value={account_name} />
                </LabelItem>
                <LabelItem label="新密码" align="right" width={75}>
                    <Input name="psw1" type="password" ref={input => this.input_psw1 = input} value={psw1} onChange={this.inputOnChange} style={inputStyle} />
                </LabelItem>
                <LabelItem label="重复密码" align="right" width={75}>
                    <Input name="psw2" type="password" ref={input => this.input_psw2 = input} value={psw2} onChange={this.inputOnChange} style={inputStyle} />
                </LabelItem>
            </OperModal>
        );
    }
}

export default ModifyPswModal;